<template>
    <div class="banner-wrap">
        <div class="center-wrap">
            <div class="ban f-pr" style="z-index:10;">
                <a hidefocus="true" class="active d-flag" href="javascript:;" target="_blank">
                    <img class="preview-img" :src="banner[bannerIndex].imageUrl" style="transition: opacity 1s ease-out 0s; opacity: 1;">
                </a>
                <a hidefocus="true" href="javascript:void(0)" class="btnl" @click="prev">&lt;</a>
                <a hidefocus="true" href="javascript:void(0)" class="btnr" @click="next">&gt;</a>

                <div class="dots">
                    <a 
                        hidefocus="true" href="javascript:void(0)" 
                        class="pg"
                        v-for="(item, index) in banner" 
                        :key="index" 
                        :class="{active: index === bannerIndex}"
                        :data-index="index"
                        @click="change(index)"
                    >
                    </a>
                </div>
            </div>

            <div class="download f-pr">
                <a id="side-download" href="/download" class="btn" hidefocus="true">下载客户端</a>
                <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                <span class="shadow"></span>
                <span class="shadowr"></span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'banner',

        data() {
            return {
                banner: [{imageUrl: ''}],
                bannerIndex: 0
            }
        },

        mounted(){
            this.$api['other/banner']().then(result => {
                this.banner = result.banners;

                this.timeInterval = setInterval(this.next , 3000);
            })

        },

        methods: {
            next(){
                this.bannerIndex++;
                this.bannerIndex %= this.banner.length;
            },
            prev(){
                this.bannerIndex--;
                if(this.bannerIndex < 0) this.bannerIndex = this.banner.length-1;
            },
            change(i){
                this.bannerIndex = i;
            }
        }
    }
</script>

<style lang="scss" scoped>
    $downloadBg: url(../../assets/images/download.png) no-repeat 0 top;
    $bannerBg: url(../../assets/images/banner.png) no-repeat 0 top;

    .banner-wrap{
        background-color: #242424;
    }
    .center-wrap {
        position: relative;
        width: 982px;
        height: 336px;
        margin: 0 auto;
        

        .ban {
            width: 100%;
            height: 100%;

            .preview-img {
                display: block;
                width: 730px;
                height: 336px;
            }


        }

        .btnl,
        .btnr {
            background: $bannerBg;
            display: block;
            position: absolute;
            top: 50%;
            margin-top: -31px;
            width: 37px;
            height: 63px;
            text-indent: -9999px;
        }

        .btnl {
            left: -68px;
            background-position: 0 -360px;

            &:hover {
                background-position: 0 -430px;
            }
        }
        .btnr {
            right: -68px;
            background-position: 0 -508px;

            &:hover {
                background-position: 0 -578px;
            }
        }

        .dots {
            position: absolute;
            top: 310px;
            left: 0;
            width: 730px;
            height: 20px;
            text-align: center;

            .pg {
                display: inline-block;
                width: 20px;
                height: 20px;
                background: $bannerBg;
                background-position: 3px -343px;
            }

            .active{
                background-position: -16px -343px;
            }
        }
    }

    .download {
        position: absolute;
        top: 0;
        z-index: 20;
        right: -1px;
        width: 254px;
        height: 336px;
        
        &,.btn {
            background: $downloadBg;
        }

        p {
            margin: 10px auto;
            text-align: center;
            color: #8d8d8d;
        }

        .btn {
            display: block;
            width: 215px;
            height: 56px;
            margin: 212px 0 0 19px;
            background-position: 0 9999px;
            text-indent: -9999px;
        }
    }
</style>